<template>
  <div class="mb-10px">
    <div class="flex text-[var(--el-text-color-primary)] justify-between items-center">
      <span
        ><span v-if="required" class="text-red-500 line-height-16px vertical-bottom">*</span
        ><span class="text-16px color-#8A8A8A">{{ title }}</span></span
      >
      <slot name="extra"></slot>
    </div>
    <div v-if="desc" class="text-12px color-#8A8A8A">
      {{ desc }}
    </div>
    <div class="pb-6px"></div>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'Index' })

defineProps({
  title: {
    type: String
  },
  desc: {
    type: String
  },
  required: {
    type: Boolean,
    default: false
  }
})
</script>
